<template>
  <div class="time border-bottom">
    <div class="timeLeft">
      游玩时间
    </div>
    <div class="timeRight">
      <ul >
        <li v-for="(item,index) of list"
                   :key="index"
                   :class="{active :index == isActive}"
                   @click="changeBgColor(index)"
        >
          {{item.day}}
          <p>{{item.date}}</p>
        </li>
        <li>更多日期</li>
      </ul>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'ShopTime',
    data () {
      return {
        isActive: false,
        list: [{day: '今天', date: ''},
          {day: '明天', date: ''},
        ],
        bg: {
          backgroundColor: 'yellow'
        },
      }
    },
    mounted () {
      const day = new Date();
      var m = day.getMonth() + 1;
      var d = day.getDate();
      const today = m + "月" + d + "日";
      const tomorrow = m + "月" + (d + 1) + "日";
      this.list[0].date = today;
      this.list[1].date = tomorrow;
    },
    methods: {
      changeBgColor (index) {
       this.isActive = index
      }
    }

  }
</script>

<style  scoped>
  .time {
    width: 100%;
    height: 50px;
  }
  .timeLeft {
    width: 20%;
    text-align: center;
    line-height: 50px;
    float: left;
  }

  .ttimeRight ul {
   list-style: none;
   height:45px;
 }
  .timeRight ul li {
    float: left;
    width: 22%;
    height: 45px;
    text-align: center;
    line-height: 30px;
    margin-left: 10px;
    border: 1px solid #333333;
    border-radius: 5px;

  }
  .timeRight ul li:last-child {
    line-height: 45px;
  }
  .timeRight ul li p {
    margin-top: -15px;
    font-size: 8px;
    color:#333333;
  }
</style>





